<template>
  <view>
      <!-- 使用自定义的搜索组件 -->
    <!-- 在父组件绑定自定义组件的click事件处理函数 -->
    <my-search @click="gotoSearch"></my-search>
      <!-- 分类选择 -->
    <view class="cate-container">
          <!-- 左侧一级分类 -->
          <scroll-view class="cate-left" scroll-y="true" :style="{height: wh+'px'}" >
           <view
             :class="['cate-left-item', i===active ? 'active':'']"
             v-for="(item, i) in cateList" :key="i"
               @click="changeActive(i)"
           >
              {{item.cat_name}}
            </view>
          </scroll-view>
     
       <!-- 右侧二级分类 -->
       <!-- 右侧的滚动视图区域 -->
       <scroll-view
         class="cate-right"
         scroll-y="true"
         :style="{height: wh + 'px'}"
         :scroll-top="scrollTop"
       >
       <!-- 二级分类item -->
       <view class="cate-right-item" v-for="(item, i) in cateLevel2" :key="i">
         <!-- 二级分类title -->
         <view class="cate-right-item-title">
           /{{item.cat_name}}/
         </view>
         <!-- 二级分类内容容器 -->
         <view class="cate-right-item-content">
           <!-- 二级分类每一项内容 -->
        <!-- 二级分类每一项内容 -->
        <view
          class="cate-right-item-content-box"
          v-for="(item2, i2) in item.children"
          :key="i2"
          @click="gotoGoodsList(item2)"
        >
          <!-- 二级分类图片 -->
          <image :src="item2.cat_icon" mode="widthFix"></image>
          <!-- 二级分类名称 -->
          <text>{{item2.cat_name}}</text>
        </view>
         </view>
       </view>
       </scroll-view>
       
     
    </view>
  </view>
</template>

<script>

  // 按需导入 mapGetters 这个辅助方法
  import { mapGetters } from 'vuex'
  // 导入自己封装的 mixin 模块
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
      // 将 badgeMix 混入到当前的页面中进行使用
      mixins: [badgeMix],
     computed: {
        // 将 m_cart 模块中的 total 映射为当前页面的计算属性
        ...mapGetters('m_cart', ['total']),
      },
     data() {
       return {
          // 左侧一级分类选中索引
             active: 0,
           // 分类数据列表
           cateList: [],
          // 二级分类列表
           cateLevel2: [],
             // 滚动条距离顶部的距离 
           scrollTop: 0
         }
       },
    onLoad() {
      // 获取页面可用高度
      // https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
      const sysInfo = uni.getSystemInfoSync()
       // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
       this.wh = sysInfo.windowHeight - 50
      console.log(this.wh)
        // 获取分类数据
        this.getCateList()
    },
    methods: {
      // 获取分类数据
      async getCateList() {
        // 发起请求
        const { data: res } = await uni.$http.get('/categories')
        // 数据获取异常判断
        if (res.meta.status !== 200) return uni.$showMsg()
        // 保存数据到data中
        this.cateList = res.message
         // 为二级分类赋值
          this.cateLevel2 = res.message[0].children
        // console.log(this.cateList)
      },
       // 改变一级分类索引
        changeActive(i) {
          this.active = i
          // 更新二级分类列表数据
          this.cateLevel2 = this.cateList[i].children
            // 更新右侧二级分类距离顶部距离
          this.scrollTop = Math.random()
        },
        // 点击二级分类详情跳转到商品列表页
        gotoGoodsList(goods){
          uni.navigateTo({
            url: `/subpkg/goods_list/goods_list?cid=${goods.cat_id}`
          })
        },
          // 跳转到分包中的搜索页面
           gotoSearch() {
             console.log(111)
             uni.navigateTo({
               url: '/subpkg/search/search'
             })
           },
            setBadge() {
                 // 调用 uni.setTabBarBadge() 方法，设置购物车右上角徽标
                 uni.setTabBarBadge({
                    index: 2, // tabBar页面索引
                    text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
                 })
              }
    }
  }
</script>

<style lang="scss">
.cate-container {
  display: flex;
  .cate-left{
    width: 240rpx;
    .cate-left-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 120rpx;
      background-color: #efefef;
      font-size: 24rpx;
      // 选中样式
      &.active {
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        // 左边红线
        &::before {
          content: '';
          width: 6rpx;
          height: 60rpx;
          background-color: #c00000;
        }
        // 右边白线和背景相同
        &::after {
          content: '';
          width: 6rpx;
          height: 60rpx;
          background-color: #fffff;
        }
      }
    }
  }
  .cate-right {
    .cate-right-item {
      .cate-right-item-title{
        display: flex;
        justify-content: center;
        font-weight: bold;
        font-size: 24rpx;
        padding: 20rpx 0;
      }
      .cate-right-item-content {
        display: flex;
        flex-wrap: wrap;
        .cate-right-item-content-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.33%;
          padding: 20rpx;
          box-sizing: border-box;
          image {
            width: 100%;
          }
          text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 9;
}
</style>
